 <!-- Copyright 2020 Carlos Alberto Ruiz Naranjo

 This file is part of magic-hdl-stm.

 magic-hdl-stm is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 magic-hdl-stm is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with magic-hdl-stm.  If not, see <https://www.gnu.org/licenses/>. -->

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="index.css">
  <meta charset="utf-8">
  <title>Magic HDL state machine</title>
</head>
  <body id="body">
    <div class="toolbar">
      <div class="center-panel">
          <label class="fancy-checkbox">
              <input id="code-clipboard" name="zoom-mode" type="radio" value="fixed" />
              <div class="button">Code to clipboad</div>
          </label>
          <label class="fancy-checkbox">
              <input id="save-as-json" name="zoom-mode" type="radio" value="fit"/>
              <div class="button">Save as JSON</div>
          </label>
          <label class="fancy-checkbox">
              <input id="load-json" name="zoom-mode" type="radio" value="fit"/>
              <div class="button">Load JSON</div>
          </label>
          <label class="fancy-checkbox">
            <input id="clear" name="zoom-mode" type="radio" value="fit"/>
            <div class="button">Clear</div>
          </label>
      </div>
  </div>
  <p></p>

  <div class="row">
    <div class="column">
      <div id="container"></div>
    </div>
    <div class="column">
      <div id="div_table">
        <table class="table" id="table"></table>
        <!-- Insert new state -->
        <div  class="insert_n" id="i_state" hidden=true>
          <label id="label_exp">State name:</label>
          <input class="text_area" type="text" id="i_state_name" name="firstname" placeholder="Insert new state...">
          <button class="button_stm_insert" id="i_state_insert" type="button">Insert</button> 
          <button class="button_stm_cancel" id="i_state_cancel" type="button">Cancel</button> 
        </div>
        <!-- Insert new output -->
        <div  class="insert_n" id="i_output" hidden=true>
          <label id="label_exp">Output:</label>
          <input class="text_area" type="text" id="i_output_name" name="firstname" placeholder="Insert new output...">
          <button class="button_stm_insert" id="i_output_insert" type="button">Insert</button> 
          <button class="button_stm_cancel" id="i_output_cancel" type="button">Cancel</button> 
        </div>
        <!-- Insert new transition -->
        <div class="insert_n" id="i_tran" hidden=true>
          <label id="label_exp">Destination:</label>
          <select id="i_tran_dest"></select>
          <label id="label_exp">Condition:</label>
          <input class="text_area" type="text" id="i_tran_cond" name="firstname" placeholder="Insert condition...">
          <button class="button_stm_insert" id="i_tran_insert" type="button">Insert</button> 
          <button class="button_stm_cancel" id="i_tran_cancel" type="button">Cancel</button> 
        </div>
        <!-- Edit transition -->
        <div class="insert_n" id="e_tran" hidden=true>
          <label id="label_exp" for="e_tran_dest">Destination:</label>
          <select id="e_tran_dest"></select>
          <label id="label_exp">Condition:</label>
          <input class="text_area" type="text" id="e_tran_cond" name="firstname" placeholder="Insert condition...">
          <button class="button_stm_insert" id="e_tran_insert" type="button">Insert</button> 
          <button class="button_stm_cancel" id="e_tran_cancel" type="button">Cancel</button> 
        </div>
        <!-- Edit transition -->
        <div class="insert_n" id="e_output" hidden=true>
          <label id="label_exp">Output:</label>
          <input class="text_area" type="text" id="e_output_output" name="firstname" placeholder="Insert condition...">
          <button class="button_stm_insert" id="e_output_insert" type="button">Insert</button> 
          <button class="button_stm_cancel" id="e_output_cancel" type="button">Cancel</button> 
        </div>
      </div>
    </div>
  </div>
 
  <div id="config">
    <label for="config_0">Language:</label>
    <select id="config_0">
      <option value="vhdl">VHDL</option>
      <option value="verilog">Verilog</option>
    </select>
    <label id="label_config_1">Clock name:</label>
    <input class="text_area" id="clock_name" type="text" value="clk">
    <label id="label_config_1">State name:</label>
    <input class="text_area" id="state_name" type="text" value="state">
    <label id="label_config_1">Enable reset:</label>
    <input class="text_area" id="reset_enable" type="checkbox" value="reset">
    <label id="label_config_1">Reset condition:</label>
    <input class="text_area" id="reset_signal" type="text" value="resetn = 0">
    <label id="label_config_1">Reset state:</label>
    <input class="text_area" id="reset_state" type="text" value="S0">
  </div>

  <!-- Context menu -->
  <input id="inp" type='file' style="visibility:hidden;"/>
  <ul id="menu_state"></ul>
  <div id="out-click"></div>

  <script>var exports = {"__esModule": true};</script>
  <script type="text/javascript" src="magic_hdl_smt.bundle.js"></script>
</body>
</html>
